import React from "react";
import WeUI from 'react-weui'
import IconUser from './assets/img/dianzan.jpg'

const {
    Tab,
    TabBody,
    Cells,
    Cell,
    CellHeader,
    CellBody,
    CellFooter,
    Badge
} = WeUI

const User = () => {
    // 页面，组件化思维
    return (
        <Tab>
            <TabBody>
                <div>
                    <Cells style={{ marginTop: '0px' }}>
                        <Cell>
                            <CellHeader style={{ position: 'relative', marginRight: '' }}>
                                <img src={IconUser} style={{ width: '50px', display: 'block' }}></img>
                                {/* src 用相对当前路径容易出错 {引入数据}更好 */}
                            </CellHeader>
                            <CellBody>
                                <p>youzi</p>
                                <p style={{ fontSize: '13px', color: '#000' }}>欢迎来到图书馆</p>
                            </CellBody>
                        </Cell>
                        {/* access props 默认 true */}
                        <Cell access>
                            <CellBody style={{ color: 'black' }}>
                                发出的申请
                                <Badge preset="body">8</Badge>
                            </CellBody>
                            <CellFooter />
                        </Cell>
                        <Cell access>
                            <CellBody style={{ color: 'black' }}>
                                收到的申请
                                <Badge preset="body">8</Badge>
                            </CellBody>
                            <CellFooter />
                        </Cell>
                        <Cell access>
                            <CellBody style={{ color: 'black' }}>
                                收藏
                            </CellBody>
                            <CellFooter />
                        </Cell>
                        <Cell access>
                            <CellBody style={{ color: 'black' }}>
                                地址
                            </CellBody>
                            <CellFooter />
                        </Cell>
                    </Cells>
                </div>
            </TabBody>
        </Tab>
    )
}

export default User